<template>
  <div>
    <h2>欢迎访问蜗牛养老后台管理系统</h2>
    <el-card>
      <!--搜索框11-->
      <el-row :gutter="35">
        <el-col :span="18">
          <b>楼栋: </b>
          <el-select v-model="buildingId" placeholder="请选择楼栋号"
                     @change="searchStorey(buildingId)" style="width: 150px">
            <el-option label="请选择楼栋号" value="-1"></el-option>
            <el-option v-for="t in buildingList" :label="t.buildingname" :value="t.id"></el-option>
          </el-select>
          <b> ---->楼层: </b>
          <el-select v-model="storeyId" placeholder="请选择楼层"
                     @change="searchRoom(buildingId,storeyId)" style="width: 150px">
            <el-option label="请先选择楼栋" value="-1"></el-option>
            <el-option v-for="t in storeyList" :label="t.storeyname" :value="t.id"></el-option>
          </el-select>
          <b> ---->房间: </b>
          <el-select v-model="roomId" placeholder="请选择房间号" @change="search" style="width: 180px">
            <el-option label="请选择楼层和楼栋" value="-1"></el-option>
            <el-option v-for="t in roomList" :label="t.roomname" :value="t.id"></el-option>
          </el-select>

        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="clearAllId">清空搜索</el-button>
        </el-col>
      </el-row>
      <div>
        <el-button type="warning" style="margin: 25px auto" @click="openAddEleForm">创建电费单</el-button>
      </div>
      <!--添加电费单-->
      <el-dialog title="添加电费单" :visible.sync="addEleFormVisible" @close="closeAddEleForm"
                 :close-on-click-modal="false" width="65%">
        <el-form ref="addEleForm" :rules="addEleFormRules" :inline="true" :model="addEleForm" label-width="150px"
                 size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="楼栋" prop="buildingId">
                <el-select v-model="addEleForm.buildingId" placeholder="请选择楼栋号"
                           @change="searchStoreyAdd(addEleForm.buildingId)" style="width: 150px">
                  <el-option label="请选择楼栋号" value=""></el-option>
                  <el-option v-for="t in buildingList" :label="t.buildingname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层" prop="storeyId">
                <el-select v-model="addEleForm.storeyId" placeholder="请选择楼层"
                           @change="searchRoomAdd(addEleForm.buildingId,addEleForm.storeyId)" style="width: 150px">
                  <el-option label="请先选择楼栋" value=""></el-option>
                  <el-option v-for="t in addStoreyList" :label="t.storeyname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="房间号" prop="roomId">
                <el-select v-model="roomIdfu" placeholder="请选择房间号"
                           @change="searchRoomById(addEleForm.buildingId,addEleForm.storeyId,roomIdfu)"
                           style="width: 180px">
                  <el-option label="请选择楼层和楼栋" value=""></el-option>
                  <el-option v-for="t in addRoomList" :label="t.roomname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间" prop="usebegintime">
                <el-date-picker
                    v-model="addEleForm.usebegintime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :editable="false"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期" prop="useendtime">
                <el-date-picker
                    v-model="addEleForm.useendtime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :editable="false"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="分摊人员数" prop="shareOlderId">
                <el-input v-model="addEleForm.shareOlderId" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="期初数" prop="beginnums">
                <el-input v-model="addEleForm.beginnums"
                          @change="calculateMoney(addEleForm.beginnums,addEleForm.endnums,addEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="期末数" prop="endnums">
                <el-input v-model="addEleForm.endnums"
                          @change="calculateMoney(addEleForm.beginnums,addEleForm.endnums,addEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="单价" prop="unitprice">
                <el-input v-model="addEleForm.unitprice"
                          @change="calculateMoney(addEleForm.beginnums,addEleForm.endnums,addEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="金额" prop="totalmoney">
                <el-input v-model="addEleForm.totalmoney" :readonly="true"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="electricityremark">
                <el-input v-model="addEleForm.electricityremark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-descriptions class="margin-top" title="分摊人员信息" :column="18" border>
            <el-descriptions-item>
              <template>
                <el-table
                    :data="addEleOlderList"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                >
                  <el-table-column
                      label="序号"
                      type="index"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="长者姓名"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="idcard"
                      label="身份证号"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="bed.bedname"
                      label="床位号"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="tel"
                      label="联系电话"
                      align="center">
                  </el-table-column>
                </el-table>
              </template>
            </el-descriptions-item>

          </el-descriptions>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAddEleForm">取 消</el-button>
          <el-button type="primary" @click="addEleFormOk">确 定</el-button>
        </div>
      </el-dialog>
      <!--修改电费单-->
      <el-dialog title="修改电费单" :visible.sync="modifyEleFormVisible" @close="closeModifyEleForm"
                 :close-on-click-modal="false" width="65%">
        <el-form ref="modifyEleForm" :rules="modifyEleFormRules" :inline="true" :model="modifyEleForm" label-width="150px"
                 size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="楼栋" prop="buildingId">
                <el-select v-model="modifyEleForm.buildingId" placeholder="请选择楼栋号"
                           @change="searchStoreyModify(modifyEleForm.buildingId)" style="width: 150px">
                  <el-option label="请选择楼栋号" value=""></el-option>
                  <el-option v-for="t in buildingList" :label="t.buildingname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层" prop="storeyId">
                <el-select v-model="modifyEleForm.storeyId" placeholder="请选择楼层"
                           @change="searchRoomMondify(modifyEleForm.buildingId,modifyEleForm.storeyId)"
                           style="width: 150px">
                  <el-option label="请先选择楼栋" value=""></el-option>
                  <el-option v-for="t in StoreyListModify" :label="t.storeyname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="房间号" prop="roomId">
                <el-select v-model="modifyEleForm.roomId" placeholder="请选择房间号"
                           @change="searchRoomByIdModify(modifyEleForm.buildingId,modifyEleForm.storeyId,modifyEleForm.roomId)"
                           style="width: 180px">
                  <el-option label="请选择楼层和楼栋" value=""></el-option>
                  <el-option v-for="t in RoomListModify" :label="t.roomname" :value="t.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间" prop="usebegintime">
                <el-date-picker
                    v-model="modifyEleForm.usebegintime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :editable="false"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期" prop="useendtime">
                <el-date-picker
                    v-model="modifyEleForm.useendtime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :editable="false"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="分摊人员数" prop="shareOlderId">
                <el-input v-model="modifyEleForm.shareOlderId" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="期初数/Kw" prop="beginnums">
                <el-input v-model="modifyEleForm.beginnums"
                          @change="calculateMoneyModify(modifyEleForm.beginnums,modifyEleForm.endnums,modifyEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="期末数/Kw" prop="endnums">
                <el-input v-model="modifyEleForm.endnums"
                          @change="calculateMoneyModify(modifyEleForm.beginnums,modifyEleForm.endnums,modifyEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="单价/元" prop="unitprice">
                <el-input v-model="modifyEleForm.unitprice"
                          @change="calculateMoneyModify(modifyEleForm.beginnums,modifyEleForm.endnums,modifyEleForm.unitprice)"></el-input>
              </el-form-item>

              <el-form-item label="金额/元" prop="totalmoney">
                <el-input v-model="modifyEleForm.totalmoney" :readonly="true"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="electricityremark">
                <el-input v-model="modifyEleForm.electricityremark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-descriptions class="margin-top" title="分摊人员信息" :column="18" border>
            <el-descriptions-item>
              <template>
                <el-table
                    :data="modifyEleOlderList"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                >
                  <el-table-column
                      label="序号"
                      type="index"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="长者姓名"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="idcard"
                      label="身份证号"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="bed.bedname"
                      label="床位号"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="tel"
                      label="联系电话"
                      align="center">
                  </el-table-column>
                </el-table>
              </template>
            </el-descriptions-item>

          </el-descriptions>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeModifyEleForm">取 消</el-button>
          <el-button type="primary" @click="modifyEleFormOk">确 定</el-button>
        </div>
      </el-dialog>
      <!--查看电费单-->
      <el-dialog title="查看电费" :visible.sync="searchEleVisible"
                 width="80%" @close="searchEleFormClose" :close-on-click-modal="false">
        <el-descriptions v-model="Ele" class="margin-top" title="电费单信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              房间
            </template>
            <el-tag>{{ Ele.bed.bedname }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              开始日期
            </template>

            <el-tag> {{ Ele.usebegintime }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              结束日期
            </template>

            <el-tag> {{ Ele.useendtime }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              期初数
            </template>
            <el-tag>{{ Ele.beginnums }}KW</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              期末数
            </template>

            <el-tag>{{ Ele.endnums }}KW</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              分摊人员数
            </template>
            <el-tag>{{ Ele.shareOlderId }}人</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              状态
            </template>
            <el-tag v-if="Ele.electricitystatus == 0">待确认</el-tag>
            <el-tag v-if="Ele.electricitystatus == 1">已确认</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              单价
            </template>
            <el-tag> {{ Ele.unitprice }}元</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              金额
            </template>

            <el-tag> {{ Ele.totalmoney }}元</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            {{ Ele.electricityremark }}
          </el-descriptions-item>
        </el-descriptions>
        <hr>
        <el-descriptions class="margin-top" title="分摊人员信息" :column="18" border>
          <el-descriptions-item>
            <template>
              <el-table
                  :data="Ele.olders"
                  style="width: 100%"
                  :row-class-name="tableRowClassName"
              >
                <el-table-column
                    label="序号"
                    type="index"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="长者姓名"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="idcard"
                    label="身份证号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="bed.bedname"
                    label="床位号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="tel"
                    label="联系电话"
                    align="center">
                </el-table-column>

                <el-table-column
                    prop="emergencytel"
                    label="紧急联系人"
                    align="center">
                </el-table-column>
              </el-table>
            </template>
          </el-descriptions-item>

        </el-descriptions>


      </el-dialog>
      <!--主体数据-->
      <template>
        <el-table
            :data="EleList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
        >
          <el-table-column
              label="编号"
              type="index"
              align="center">
          </el-table-column>
          <el-table-column
              prop="bed.bedname"
              label="房间号"
              align="center">
          </el-table-column>
          <el-table-column
              prop="usebegintime"
              label="开始日期"
              align="center">
          </el-table-column>
          <el-table-column
              prop="useendtime"
              label="结束日期"
              align="center">
          </el-table-column>
          <el-table-column
              prop="beginnums"
              label="期初数"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">{{ scope.row.beginnums }} kW</span>
            </template>
            <template><span></span>></template>
          </el-table-column>
          <el-table-column
              prop="endnums"
              label="期末数"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">{{ scope.row.endnums }} kW</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="totalnums"
              label="总电量"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">{{ scope.row.totalnums }} kW</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="unitprice"
              label="单价"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">￥{{ scope.row.unitprice }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="totalmoney"
              label="总金额"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">￥{{ scope.row.totalmoney }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="shareOlderId"
              label="分摊人员数"
              align="center">
            <template slot-scope="scope">
              <span style="color: green">{{ scope.row.shareOlderId }}人</span>
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              align="center"
          >
            <template slot-scope="scope">
              <span style="color: green" v-if="scope.row.electricitystatus == 1">已确认</span>
              <span style="color: red" v-if="scope.row.electricitystatus == 0">待确认</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="electricityremark"
              label="备注"
              align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  style="margin-left: 10px"
                  @click="seachEle(scope.row)">查看
              </el-button>
              <el-button
                  size="mini"
                  style="margin-left: 10px;margin-top: 5px"
                  v-if="scope.row.electricitystatus == 0"
                  @click="handleEdit(scope.row.id)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="warning"
                  style="margin-top: 5px"
                  v-if="scope.row.electricitystatus == 0"
                  @click="EditStatus(scope.row.id,1)">确认
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  style="margin-top: 5px"
                  v-if="scope.row.electricitystatus == 0"
                  @click="deletEle(scope.row.id)">删除
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  style="margin-top: 5px"
                  v-if="scope.row.electricitystatus == 1"
                  @click="EditStatusTwo(scope.row.id,0)">取消确认
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {toRefs} from "vue";

export default {
  data() {
    return {
      Ele: {
        bed: {},
        olders: [],
      },
      roomIdfu: '',
      buildingList: [],
      addEleOlderList: [],
      modifyEleOlderList: [],
      storeyList: [],
      addStoreyList:[],
      StoreyListModify:[],
      roomList: [],
      addRoomList:[],
      RoomListModify:[],
      addEleForm: {
        beginnums: 0,
        endnums: 0,
        unitprice: 0,
      },
      modifyEleForm: {
        beginnums: 0,
        endnums: 0,
        unitprice: 0,
      },
      EleList: [],
      searchEleVisible: false,
      addEleFormVisible: false,
      modifyEleFormVisible: false,
      addEleFormRules: {
        buildingId: [
          {required: true, message: '楼栋号不能为空', trigger: 'blur'}
        ],
        storeyId: [
          {required: true, message: '楼层号不能为空', trigger: 'blur'}
        ],
        roomId: [
          {required: true, message: '房间号不能为空', trigger: 'blur'}
        ],
        usebegintime: [
          {required: true, message: '开始时间不能为空', trigger: 'blur'},
        ],
        useendtime: [
          {required: true, message: '结束时间不能为空', trigger: 'blur'},
        ],
        beginnums: [
          {required: true, message: '期初数不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        endnums: [
          {required: true, message: '期末数不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        unitprice: [
          {required: true, message: '单价不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },
      modifyEleFormRules: {
        buildingId: [
          {required: true, message: '楼栋号不能为空', trigger: 'blur'}
        ],
        storeyId: [
          {required: true, message: '楼层号不能为空', trigger: 'blur'}
        ],
        roomId: [
          {required: true, message: '房间号不能为空', trigger: 'blur'}
        ],
        usebegintime: [
          {required: true, message: '开始时间不能为空', trigger: 'blur'},
        ],
        useendtime: [
          {required: true, message: '结束时间不能为空', trigger: 'blur'},
        ],
        beginnums: [
          {required: true, message: '期初数不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        endnums: [
          {required: true, message: '期末数不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        unitprice: [
          {required: true, message: '单价不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },
      buildingId: "-1",
      storeyId: "-1",
      roomId: "-1",
      pageNum: 1,
      pageSize: 3,
      total: 0,
    };
  },

  methods: {
    closeModifyEleForm() {
      this.modifyEleFormVisible = false;
      this.initBuildingList();
      this.initStoreyListModify();
      this.initRoomListModify();
    },
    //打开编辑框
    handleEdit(id) {
      this.modifyEleFormVisible = true;
      let url = '/Ele/selectById/' + id
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyEleForm = res.data.data;
          this.modifyEleOlderList=res.data.data.olders;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    //计算金额
    calculateMoney(beginnums, endnums, unitprice) {
      if (beginnums > endnums) {
        this.$message({
          message: "期末数不能小于期初数",
          type: 'error',
          duration: 1000
        });
      }
      let end = parseFloat(endnums);
      this.addEleForm.endnums = end;
      let begin = parseFloat(beginnums);
      this.addEleForm.beginnums = begin;
      let price = parseFloat(unitprice);
      this.addEleForm.unitprice = price;
      let nums = end - begin;
      let money = (end - begin) * price;
      this.$set(this.addEleForm, 'totalmoney', money);
      this.$set(this.addEleForm, 'totalnums', nums);
    },
    //计算金额
    calculateMoneyModify(beginnums, endnums, unitprice) {
      if (beginnums > endnums) {
        this.$message({
          message: "期末数不能小于期初数",
          type: 'error',
          duration: 1000
        });
      }
      let end = parseFloat(endnums);
      this.modifyEleForm.endnums = end;
      let begin = parseFloat(beginnums);
      this.modifyEleForm.beginnums = begin;
      let price = parseFloat(unitprice);
      this.modifyEleForm.unitprice = price;
      let nums = end - begin;
      let money = (end - begin) * price;
      this.$set(this.modifyEleForm, 'totalmoney', money);
      this.$set(this.modifyEleForm, 'totalnums', nums);
    },

    //确认修改
    modifyEleFormOk() {
      this.$refs.modifyEleForm.validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请先完善数据",
            type: 'error',
            duration: 1000
          });
          return
        } else {
          this.$confirm("确认添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/Ele/modifyEle'
            this.$axios.put(url, this.modifyEleForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initEleList();
                this.modifyEleFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },

    //确认添加
    addEleFormOk() {
      this.$refs.addEleForm.validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请先完善数据",
            type: 'error',
            duration: 1000
          });
          return
        } else {
          this.$confirm("确认添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/Ele/addEle';
            this.$axios.post(url, this.addEleForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initEleList();
                this.addEleFormVisible = false;
                this.addEleForm = {};
                this.addEleForm.beginnums = 0;
                this.addEleForm.endnums = 0;
                this.addEleForm.unitprice = 0;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },

    //打开添加框
    openAddEleForm() {
      this.addEleFormVisible = true;

    },
    //打开查看框
    seachEle(row) {
      this.Ele = row;
      this.searchEleVisible = true;
      console.log(this.Ele)
    },
    //关闭查看对话框
    searchEleFormClose() {
      this.searchEleVisible = false;
    },
    //改变页数查询
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initEleList();
    },
    //改变条数查询
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initEleList();
    },
    //初始化查询电费数据
    initEleList() {
      let url = "/Ele/list"
      this.$axios.get(url, {
        params: {
          buildingId: this.buildingId,
          storeyId: this.storeyId,
          roomId: this.roomId,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.EleList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //清空搜索
    clearAllId() {
      this.buildingId = '-1';
      this.roomId = '-1';
      this.storeyId = '-1';
      this.initEleList()
    },
    //初始化楼栋信息
    initBuildingList() {
      let url = "/building/selectAllList"
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.buildingList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //初始化楼层信息
    initStoreyListModify() {
      let url = "/storey/selectAllList"
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.StoreyListModify = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //初始化房间信息
    initRoomListModify() {
      let url = "/room/selectAllList"
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.RoomListModify = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //三级联动搜索房间
    searchRoom(buildingId, storeyId) {
      //根据楼层找房间
      this.roomId = '-1';
      this.roomList = [];
      let url = '/room/selectByStoreyIdYSW/' + buildingId + '/' + storeyId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.roomList = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
          this.initEleList();
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    //修改框三级联动搜索房间
    searchRoomMondify(buildingId, storeyId) {
      //根据楼层找房间
      this.modifyEleOlderList = [];
      this.RoomListModify = [];
      let url = '/room/selectByStoreyIdYSW/' + buildingId + '/' + storeyId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.RoomListModify = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //添加框三级联动搜索房间
    searchRoomAdd(buildingId, storeyId) {
      //根据楼层找房间
      this.addEleOlderList = [];
      this.roomIdfu = '';
      this.addRoomList = [];
      let url = '/room/selectByStoreyIdYSW/' + buildingId + '/' + storeyId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.addRoomList = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    search() {
      this.pageNum = 1;
      this.initEleList();
    },
    searchRoomByIdModify(buildingId, storeyId, roomId) {
      this.modifyEleForm.roomId = roomId;
      let url = '/older/addEleSelectOlder/' + buildingId + '/' + storeyId + '/' + roomId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyEleOlderList = res.data.data;
          this.modifyEleForm.shareOlderId = this.modifyEleOlderList.length
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    searchRoomById(buildingId, storeyId, roomId) {
      this.addEleForm.roomId = roomId;
      let url = '/older/addEleSelectOlder/' + buildingId + '/' + storeyId + '/' + roomId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.addEleOlderList = res.data.data;
          this.addEleForm.shareOlderId = this.addEleOlderList.length
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    //三级联动搜索楼层
    searchStorey(buildingId) {
      //根据楼栋找楼层
      this.storeyId = '-1';
      this.roomId = '-1';
      this.roomList = [];
      this.storeyList = [];
      let url = '/storey/selectByBuildIdYSW/' + buildingId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.storeyList = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
          this.initEleList();
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //修改框三级联动搜索楼层
    searchStoreyModify(buildingId) {
      //根据楼栋找楼层
      this.modifyEleForm.storeyId = '';
      this.modifyEleForm.roomId = '';
      this.RoomListModify = [];
      this.StoreyListModify = [];
      let url = '/storey/selectByBuildIdYSW/' + buildingId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.StoreyListModify = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
          this.modifyEleOlderList = [];
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    //添加框三级联动搜索楼层
    searchStoreyAdd(buildingId) {
      //根据楼栋找楼层
      this.addEleForm.storeyId = '';
      this.roomIdfu = '';
      this.addRoomList = [];
      this.addStoreyList = [];
      let url = '/storey/selectByBuildIdYSW/' + buildingId;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.addStoreyList = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
          this.addEleOlderList = [];
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
    openAddOutApplication(id) {
      this.addOutFormVisible = true;
      this.addOutForm = {};
    },
    closeAddEleForm() {
      this.addEleFormVisible = false;
      this.addEleForm = {};
      this.roomIdfu = '';
      this.addRoomList = [];
      this.addStoreyList = [];
      this.$set(this.addEleForm, 'beginnums', 0);
      this.$set(this.addEleForm, 'endnums', 0);
      this.$set(this.addEleForm, 'unitprice', 0);
    },
    //删除电费单
    deletEle(id) {
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/Ele/deleteEle/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initEleList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      })
    },
    //修改状态  1
    EditStatus(id, status) {
      this.$confirm("确认电费单吗？确认后该电费单不可更改并且可以在下次收费时进行收费", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/Ele/modifyStatus/' + id + '/' + status;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initEleList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      })
    },
    //修改状态  0
    EditStatusTwo(id, status) {
      this.$confirm("确认取消电费单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/Ele/modifyStatus/' + id + '/' + status;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initEleList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      })

    },
    //确认添加
    AddOutFormOK() {
      this.$refs.addOutForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要创建吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/outApplication/addOutApplication'
            console.log(1111111111111111111111111111111111111)
            console.log(this.addOutForm)
            this.$axios.post(url, this.addOutForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initOutApplicationList();
                this.addOutFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
  },
  created() {
    this.initEleList();
    this.initBuildingList();
    this.initStoreyListModify();
    this.initRoomListModify();
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>